---
title: Scrolling Content
description: Handle scrolling content within the bottom sheet.
keywords: [bottom sheet scrolling, bottom sheet scrollview, bottom sheet flatlist]
---

import scrolling from './scrolling.gif'

Scrolling content within the sheet requires some special configuration on both iOS and Android. Let's admit, some things just don't work out of the box.

Follow the guide below so you can scroll your content using `TrueSheet`.

<img alt="scrolling" src={scrolling} width="300"/>

## How?

Enable the `scrollable` prop and set `nestedScrollEnabled` on your `ScrollView` or `FlatList` to properly handle scrolling within the sheet.

```tsx {5-7}
const App = () => {
  const sheet = useRef<TrueSheet>(null)

  return (
    <TrueSheet ref={sheet} scrollable>
      <View>{/* Header content */}</View>
      <ScrollView nestedScrollEnabled>
        <View />
      </ScrollView>
    </TrueSheet>
  )
}
```

:::info
By default, `scrollable` is `false`. Set it to `true` to enable automatic ScrollView fitting.
:::

### iOS

On iOS, `scrollable` automatically pins scroll views (including `ScrollView` and `FlatList`) to fit within the sheet's available space. The ScrollView's top edge will be pinned below any top sibling views, and its left, right, and bottom edges will be pinned to the container.

The scroll view detection supports up to 2 levels deep in the view hierarchy, so you can wrap your `ScrollView` or `FlatList` in a container `View` if needed:

```tsx
<TrueSheet scrollable>
  <View style={{ flex: 1 }}>
    <View>{/* Header content */}</View>
    <FlatList nestedScrollEnabled data={data} renderItem={renderItem} />
  </View>
</TrueSheet>
```

### Android

On Android, `scrollable` ensures the scroll view fills the available sheet space. You must also enable `nestedScrollEnabled` on your `ScrollView` or `FlatList` for scrolling to work properly.

:::warning
The `auto` detent does not work well with `scrollable` on Android. Use fixed fractional detents (e.g., `0.5`, `0.8`, `1`) instead when using `scrollable`.
:::

:::warning
If your `ScrollView` content height is smaller than the sheet height, scrolling may not work properly. See [Troubleshooting](/troubleshooting#unable-to-drag-on-android) for more details.
:::

:::warning
`RefreshControl` does not work with `nestedScrollEnabled` on Android due to how `SwipeRefreshLayout` interferes with the `BottomSheetBehavior`'s nested scrolling coordination. This is a known limitation of the Android platform.

As a workaround, you can disable `nestedScrollEnabled` to make `RefreshControl` work, but the sheet will no longer be draggable from within the scroll view. In this case, ensure you have a draggable area outside the scroll view (e.g., a header with a grabber) to allow users to drag the sheet.
:::
